HTMLify

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>VT Training Interactive Quiz</title><style>
:root{--ob:#0033cc;--kb:#05054e;--cyan:#1edbf9;--trans:#e7f9fc;--light:#f4f5f8;--mid:#d4d7e3;--ok:#14804a;--bad:#bd271e}*{box-sizing:border-box}body{margin:0;font-family:"Titillium Web",Arial,sans-serif;color:var(--kb);background:var(--light)}.line{height:7px;background:linear-gradient(90deg,#0033cc,#0094ff,#60f5ff)}header{background:#fff;padding:18px 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--mid)}.brand{font-size:28px;color:var(--ob);font-weight:700}.brand small{display:block;color:#8b8d8e;font-size:11px;text-align:right;margin-top:-7px}.wrap{max-width:980px;margin:26px auto;padding:0 18px}.card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 8px 26px #05054e14;margin-bottom:20px}h1,h2,h3{color:var(--ob);font-weight:400;margin-top:0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-weight:600;margin-bottom:6px}input[type=text]{width:100%;padding:12px;border:1px solid #a0a5bb;border-radius:7px;font:inherit}.meta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.pill{background:var(--trans);padding:7px 12px;border-radius:999px}.q{border-top:1px solid var(--mid);padding:22px 0}.q:first-child{border-top:0}.q legend{font-size:19px;font-weight:600;margin-bottom:12px}.opt{display:block;background:var(--light);padding:11px 13px;margin:8px 0;border-radius:8px;cursor:pointer;border:1px solid transparent}.opt:hover{border-color:var(--cyan)}button{border:0;border-radius:7px;padding:12px 20px;background:var(--ob);color:#fff;font:600 16px inherit;cursor:pointer}button.secondary{background:var(--kb)}button:disabled{opacity:.45;cursor:not-allowed}.actions{display:flex;gap:10px;flex-wrap:wrap}.progress{height:8px;background:var(--mid);border-radius:9px;overflow:hidden;margin:12px 0 25px}.progress div{height:100%;background:linear-gradient(90deg,var(--ob),var(--cyan));width:0}.result{font-size:21px;padding:16px;border-radius:8px}.pass{background:#e6f6ed;color:var(--ok)}.fail{background:#fdebea;color:var(--bad)}.screen-only{}.print-area{display:none}.summary-table,.experience-table{width:100%;border-collapse:collapse;font-size:10pt}.summary-table th,.summary-table td,.experience-table th,.experience-table td{border:1px solid #a0a5bb;padding:6px;vertical-align:top;text-align:left}.summary-table th,.experience-table th{background:#e7f9fc;color:#0033cc}.certificate{text-align:center;padding:24mm 16mm}.cert-title{font-size:30pt;margin:20mm 0 8mm}.candidate{font-size:24pt;border-bottom:1px solid #05054e;display:inline-block;min-width:130mm;padding:4mm}.score-big{font-size:20pt;margin:9mm}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20mm;margin-top:28mm}.sig{border-top:1px solid #05054e;padding-top:3mm}.print-page{position:relative;background:#fff}.print-head{display:flex;justify-content:space-between;align-items:start}.print-logo{color:#0033cc;font-size:22pt;font-weight:700}.print-logo small{display:block;color:#8b8d8e;font-size:8pt;text-align:right;margin-top:-5px}.print-footer{position:absolute;bottom:8mm;left:12mm;right:12mm;font-size:8pt;color:#76768b;display:flex;justify-content:space-between}.page-title{font-size:20pt;color:#0033cc}.note{font-size:9pt;color:#76768b}.wrong{color:#bd271e}.correct{color:#14804a}.blank-row{height:16mm}@media(max-width:650px){.intro-grid{grid-template-columns:1fr}.card{padding:18px}}
@page{size:A4 portrait;margin:0}@media print{body{background:#fff}.screen-only,header>.brand,header{display:none!important}.print-area{display:block!important}.print-page{width:210mm;height:297mm;page-break-after:always;overflow:hidden;padding:12mm 14mm 14mm}.print-page:last-child{page-break-after:auto}.line{height:6mm;position:absolute;left:0;right:0;bottom:0}.summary-table{font-size:8.3pt}.summary-table th,.summary-table td{padding:4px}.experience-table{font-size:8.5pt}.experience-table th,.experience-table td{padding:4px}.experience-table th{height:18mm}.blank-row{height:20mm}}
</style></head><body><div class="line screen-only"></div><header><div class="brand">ormazabal<small>velatia</small></div><div>VT Training Assessment</div></header><main class="wrap screen-only"><section class="card" id="start"><h1>VT Training Interactive Quiz</h1><p>Complete all 24 questions. The pass mark is 80% (20 correct answers).</p><div class="intro-grid"><div><label for="name">Candidate full name</label><input id="name" type="text" autocomplete="name"></div><div><label for="date">Date of test</label><input id="date" type="text" readonly></div></div><div class="meta"><span class="pill">24 questions</span><span class="pill">Pass mark: 20/24</span><span class="pill">Reference slides permitted</span></div><button onclick="beginQuiz()">Begin quiz</button></section><section class="card" id="quiz" hidden><h2>Assessment questions</h2><div class="progress"><div id="bar"></div></div><form id="quizForm"></form><div class="actions"><button type="button" onclick="submitQuiz()">Submit assessment</button></div></section><section class="card" id="results" hidden><h2>Assessment result</h2><div id="resultBox"></div><p>Your printable certificate includes your result, a two-page answer summary, and a future VT testing experience record.</p><div class="actions"><button onclick="window.print()">Print / Save as PDF</button><button class="secondary" onclick="location.reload()">Start again</button></div></section></main><div class="print-area" id="printArea"></div><script>
const questions=[
["What is another name for a Voltage Transformer?",["Potential Divider","Potential Transformer","Primary Transformer","Principle Transformer"],1],
["Do we use a VT to step up or down the system voltage?",["Up","Down","Both","Neither"],1],
["What happens to a VT's magnetic flux density at nominal voltage level?",["Flux density begins to decline","Flux density approaches saturation point","Increases rapidly","Reduces to zero"],1],
["What must we ensure we never do to a VT's secondary terminals?",["Short them together","Leave them open circuit","Tie one end to ground","Connect them to a fuse"],0],
["Why does a VT not short circuit?",["Secondaries are always open circuit","Fuse protected","Low impedance","High impedance"],3],
["What manufacturers of VT are approved for use on ENA equipment?",["Laboratorio Electrotecnico, Arteche","Arteche, RS Isolsec","Arteche, ALCE","RS Isolsec, ALCE"],2],
["What are the typical bushing types used on cable-connected VTs?",["A, B, C","B, C, D","C, D, E","Type 52 and 89L"],0],
["How is a cable connected to a type C bushing?",["Bail arm clip","Screw","Plug-in elbow","Friction fit"],1],
["What is the cross-sectional area of the conductor of the VT cables?",["75 mm²","100 mm²","125 mm²","150 mm²"],3],
["How many secondary windings can a single-phase VT have?",["1","2","3","4"],2],
["What is the equivalent ratio of a 33000/√3 : 110/√3 VT?",["30:1","300:1","33000:1","3:1"],1],
["What is the typical ratio used on a 33 kV secondary used in an open-delta configuration?",["33000/√3 : 110/√3","33000/3 : 110/√3","33000/√3 : 110/3","33000/3 : 110/3"],2],
["Which of the following is the most accurate metering class for a VT?",["6P","3P","0.5","0.2"],3],
["What IEC standard covers VTs?",["61869-1","61869-3","G99","ENA TS 41-36"],1],
["What is the approximate weight of a VT?",["25 kg","30 kg","50 kg","75 kg"],2],
["What cross-sectional area of wire do we use for VT secondary wiring?",["1 mm²","1.5 mm²","2 mm²","2.5 mm²"],3],
["What letter is typically used to identify VT secondary wiring on an electrical schematic drawing?",["V","T","D","E"],3],
["What test forms do we use to test a VT?",["TP114 and TP115","TP115 and TP116","TP116 and TP117","TP117 and TP118"],1],
["What is the SI prefix used to represent a factor of 10⁹?",["Tera","Giga","Mega","Kilo"],1],
["What is the SI prefix used to represent a factor of 10³?",["Tera","Giga","Mega","Kilo"],3],
["What is the SI prefix used to represent a factor of 10⁻⁶?",["Tera","Milli","Micro","Nano"],2],
["If a secondary winding is designated for an open-delta configuration, how are the terminals typically identified?",["da-dn","d+ - d-","Da-Dn","S1-S2"],0],
["Below what value would we typically investigate the VT secondary winding IR results?",["1 MΩ","10 MΩ","100 MΩ","1 TΩ"],2],
["When taking a photo of the VT accessories on site, what should we pay attention to include?",["Test probes","Bail arm clips","Cleaning wipes","VPIS"],1]
];
const esc=s=>String(s??'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
document.getElementById('date').value=new Date().toLocaleDateString('en-GB');
function beginQuiz(){if(!document.getElementById('name').value.trim()){alert('Please enter the candidate full name.');return}document.getElementById('start').hidden=true;document.getElementById('quiz').hidden=false;render();scrollTo(0,0)}
function render(){const f=document.getElementById('quizForm');f.innerHTML=questions.map((q,i)=>`<fieldset class="q"><legend>${i+1}. ${esc(q[0])}</legend>${q[1].map((o,j)=>`<label class="opt"><input type="radio" name="q${i}" value="${j}" onchange="progress()"> ${String.fromCharCode(65+j)}. ${esc(o)}</label>`).join('')}</fieldset>`).join('')}
function progress(){let n=questions.filter((_,i)=>document.querySelector(`input[name=q${i}]:checked`)).length;document.getElementById('bar').style.width=(n/questions.length*100)+'%'}
function submitQuiz(){const ans=questions.map((_,i)=>{let x=document.querySelector(`input[name=q${i}]:checked`);return x?+x.value:null});if(ans.includes(null)){alert(`Please answer all questions. ${ans.filter(x=>x===null).length} remaining.`);return}const score=ans.reduce((s,a,i)=>s+(a===questions[i][2]),0),pass=score>=20,name=document.getElementById('name').value.trim(),date=document.getElementById('date').value;document.getElementById('quiz').hidden=true;document.getElementById('results').hidden=false;document.getElementById('resultBox').innerHTML=`<div class="result ${pass?'pass':'fail'}"><strong>${pass?'PASS':'FAIL'}</strong><br>${score} / 24 (${Math.round(score/24*100)}%)</div>`;buildPrint(name,date,ans,score,pass);scrollTo(0,0)}
function head(){return `<div class="print-head"><div class="print-logo">ormazabal<small>velatia</small></div><div class="note">VT Training Assessment</div></div>`}function foot(n){return `<div class="print-footer"><span>VT Training Assessment</span><span>Page ${n} of 4</span></div><div class="line"></div>`}
function buildPrint(name,date,ans,score,pass){const rows=(from,to)=>questions.slice(from,to).map((q,k)=>{let i=from+k,a=ans[i],ok=a===q[2];return `<tr><td>${i+1}</td><td>${esc(q[0])}</td><td class="${ok?'correct':'wrong'}">${esc(q[1][a])}</td><td>${ok?'Correct':`Incorrect<br><strong>Correct answer:</strong> ${esc(q[1][q[2]])}`}</td></tr>`}).join('');const summary=(from,to,page)=>`<section class="print-page">${head()}<h2 class="page-title">Answer summary</h2><p><strong>Candidate:</strong> ${esc(name)} &nbsp; <strong>Date:</strong> ${esc(date)} &nbsp; <strong>Score:</strong> ${score}/24</p><table class="summary-table"><thead><tr><th>No.</th><th>Question</th><th>Candidate answer</th><th>Outcome / correct answer</th></tr></thead><tbody>${rows(from,to)}</tbody></table>${foot(page)}</section>`;document.getElementById('printArea').innerHTML=`<section class="print-page certificate">${head()}<div class="cert-title">Certificate of Completion</div><p>This certificate confirms that</p><div class="candidate">${esc(name)}</div><p>completed the VT Training Assessment on ${esc(date)}</p><div class="score-big"><strong>${pass?'PASS':'FAIL'}</strong><br>${score} / 24 (${Math.round(score/24*100)}%)</div><p>Pass requirement: 80% (20 out of 24 questions)</p><div class="signature-grid"><div class="sig">Candidate signature</div><div class="sig">Trainer / assessor</div></div>${foot(1)}</section>${summary(0,12,2)}${summary(12,24,3)}<section class="print-page">${head()}<h2 class="page-title">Record of VT Testing Experience</h2><p class="note">Use this page to maintain a record of future VT testing work and supervision.</p><table class="experience-table"><thead><tr><th>Date</th><th>SAP Contract No.</th><th>Contract Name</th><th>Type of equipment<br>CGM / CPG.0</th><th>No. VTs tested</th><th>Supervising Engineer and comments</th></tr></thead><tbody>${Array(8).fill('<tr class="blank-row"><td></td><td></td><td></td><td></td><td></td><td></td></tr>').join('')}</tbody></table>${foot(4)}</section>`}
</script></body></html>